<script setup lang="ts">
const showMenu = ref(false);
const { logout } = useAdminDailog();
const { user } = useAdminAuth();

const handleToggleShowMenu = () => {
  showMenu.value = !showMenu.value;
};
</script>

<template>
  <header class="p-3 flex justify-between items-center relative">
    <NuxtLink to="/admin" class="flex justify-start items-center gap-x-2">
      <div
        class="w-8 h-8 p-0.5 overflow-hidden rounded-full border border-cyan-700 shadow-md bg-white/70 text-cyan-700"
      >
        <Icon name="uil:link-broken" size="1.5rem" />
      </div>
      <h2 class="text-xl">短链接管理</h2>
    </NuxtLink>

    <div class="block lg:hidden">
      <button @click="handleToggleShowMenu">
        <Icon size="1.25rem" name="uil:align-justify" />
      </button>
    </div>

    <ul
      class="justify-end items-center gap-x-4 flex flex-col absolute right-1 top-10 bg-white/90 w-28 p-2 gap-y-2 z-[1] shadow-md rounded transition-all lg:flex-row lg:static lg:bg-transparent lg:p-0 lg:gap-y-0 lg:shadow-none lg:rounded-none lg:transition-none lg:w-auto"
      :class="{
        'visible opacity-100 lg:visible lg:opacity-100': showMenu,
        'invisible opacity-0 lg:visible lg:opacity-100': !showMenu,
      }"
    >
      <li>
        <NuxtLink class="flex justify-start items-center gap-x-1" to="/admin">
          <div><Icon name="uil:home" /></div>
          <div>首页</div>
        </NuxtLink>
      </li>

      <li>
        <NuxtLink
          class="flex justify-start items-center gap-x-1"
          to="/admin/url"
        >
          <div><Icon name="uil:link" /></div>
          <div>链接</div>
        </NuxtLink>
      </li>
      <li>
        <NuxtLink
          class="flex justify-start items-center gap-x-1"
          to="/admin/user"
        >
          <div><Icon name="uil:user" /></div>
          <div>用户</div>
        </NuxtLink>
      </li>

      <li>
        <NuxtLink
          class="flex justify-start items-center gap-x-1"
          to="/admin/profile"
        >
          <div><Icon name="uil:flower" /></div>
          <div>个人</div>
        </NuxtLink>
      </li>
      <li>
        <NuxtLink
          class="flex justify-start items-center gap-x-1"
          to="/admin/logout"
        >
          <div><Icon name="uil:exit" /></div>
          <div>注销</div>
        </NuxtLink>
      </li>
    </ul>
  </header>
</template>
